<template>
  <div class="titlebg">
    <el-row>
      <el-col :span="6">
        <div class="titlebox">
          <span class="title1">心理咨询服务平台</span>
        </div>
      </el-col>
      <el-col :span="18">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          router
          @select="handleSelect"
        >
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/test">心理测评</el-menu-item>
          <el-menu-item index="/announcement">心理资讯</el-menu-item>
          <el-menu-item index="/messageboard">心理问答</el-menu-item>
          <el-menu-item index="/appointment">心理咨询</el-menu-item>
          
          <template v-if="isLoggedIn">
            <el-sub-menu index="7" class="nav-item">
              <template #title>个人中心</template>
              <el-menu-item index="7-1" @click="handleToUserCenter">个人主页</el-menu-item>
              <el-menu-item index="7-2" @click="handleLogout">退出</el-menu-item>
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item index="/login" class="nav-item">登录/注册</el-menu-item>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const activeIndex = ref(route.path)
const username = ref('')

// 判断是否已登录
const isLoggedIn = computed(() => {
  // 根据用户角色判断登录状态
  const userRole = localStorage.getItem('userRole')
  return !!userRole
})

// 处理菜单选择
const handleSelect = (key: string) => {
  console.log(key)
}

// 处理个人中心跳转
const handleToUserCenter = () => {
  const userRole = localStorage.getItem('userRole')
  if (userRole === 'user') {
    router.push('/user/dashboard')  // 跳转到咨询者个人中心首页
  } else if (userRole === 'doctor') {
    router.push('/doctor/dashboard')  // 跳转到医生个人中心首页
  } else {
    ElMessage.warning('请先登录')
    router.push('/login')
  }
}

// 处理退出登录
const handleLogout = () => {
  localStorage.clear()  // 清除所有用户信息
  isLoggedIn.value = false
  ElMessage.success('退出成功')
  router.push('/login')
}

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  if (command === 'center') {
    const userRole = localStorage.getItem('currentRole')
    router.push(userRole === 'doctor' ? '/doctor' : '/user')
  } else if (command === 'logout') {
    // 清除登录信息
    localStorage.clear()
    isLoggedIn.value = false
    username.value = ''
    ElMessage.success('已退出登录')
    router.push('/home')
  }
}

// 初始化和更新用户状态
const updateUserState = () => {
  const userRole = localStorage.getItem('userRole')
  isLoggedIn.value = !!userRole
  username.value = localStorage.getItem('username') || '用户'
}

onMounted(() => {
  updateUserState()
})

// 监听 localStorage 变化
watch(() => localStorage.getItem('isLoggedIn'), () => {
  updateUserState()
})
</script>

<style scoped>
.titlebg {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.titlebox {
  padding: 0 30px;
  height: 70px;
  display: flex;
  align-items: center;
}

.title1 {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.el-menu {
  justify-content: center;
  border: none;
  height: 70px;
}

.menu-item {
  font-size: 16px !important;
  height: 64px !important;
  line-height: 64px !important;
  padding: 0 24px !important;
}

:deep(.el-sub-menu__title) {
  font-size: 16px !important;
  height: 64px !important;
  line-height: 64px !important;
  padding: 0 24px !important;
}

:deep(.el-menu-item) {
  font-size: 18px !important;
  height: 70px !important;
  line-height: 70px !important;
  padding: 0 30px !important;
  font-weight: 500;
}

:deep(.el-sub-menu__title) {
  font-size: 18px !important;
  height: 70px !important;
  line-height: 70px !important;
  padding: 0 30px !important;
  font-weight: 500;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #f5f7fa !important;
}

:deep(.el-menu-item.is-active) {
  font-weight: 600;
  color: #409EFF !important;
}

.user-dropdown {
  color: #409EFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-dropdown:hover {
  color: #66b1ff;
}
</style>